<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px">
          <el-col :span="6">
             <el-form-item label="客户名称">
              <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel==3" clearable filterable placeholder="请选择客户名称">
                  <el-option
                    v-for="item in fsiteNoBelongOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="容器编号">
              <el-input v-model="listQuery.fpackno" clearable class="filter-item" placeholder="请输入容器编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="容器状态">
              <el-select
                v-model="listQuery.fstate"
                class="filter-item"
                clearable
                placeholder="选择容器状态"
              >
                <el-option
                  v-for="item in fstateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
              type="primary"
                @click="handleFilter"
                >查找</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <!-- 查询结果 -->
        <JNPF-table
          v-loading="listLoading"
          :data="list"
        >
          <el-table-column
            :width="buttonColor.line"
            :index="indexMethod"
            align="center"
            label="序号"
            type="index"
          />
          <el-table-column align="left" label="容器编号" :width="buttonColor.billno" prop="fpackno" />
          <el-table-column :formatter="fnameFormat" :width="buttonColor.name" align="left" label="容器名称" prop="fpackname" />
          <el-table-column align="left" label="容器标签" prop="frfidbarcode" />
          <el-table-column :width="buttonColor.state" align="left" label="容器状态" prop="fstate">
            <template slot-scope="scope">
              <span :style="{color:buttonColor.statedisable}" v-if="scope.row.fstate===0">{{ scope.row.fstate | statusFilter }}</span>
              <span :style="{color:buttonColor.statestart}" v-else>{{ scope.row.fstate | statusFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column :formatter="datetimeFormat" align="left" label="更新时间" prop="fupddate" />
          <el-table-column :formatter="foperatorFormat" align="left" label="更新人员" prop="foperator" />
        </JNPF-table>
        <paginations
	:total="total"
	:page.sync="listQuery.currentPage"
	:limit.sync="listQuery.pageSize"
	/>
      </div>
    </div>
  </div>
</template>
<script>
import { listpackInv } from '@/api/packInv'
import { listtsPack } from "@/api/tsPack";
import {fsiteOptionsByLevel, getListArea } from "@/api/area";
import {tableColor, buttonColor } from "@/filters/index";
import Pagination from "@/components/Pagination";
import moment from "moment";

const statusMap = {
  1: "使用",
  0: "禁用",
};

export default {
  name: "ITcGoodInv",
  components: { Pagination },
   filters: {
    statusFilter(type) {
      return statusMap[type];
    },
  },
  data() {
    return {
      fsiteNoBelongOptions: [], // 客户列表
      getListfoperator: [],
      searchListAll: [],
      list: null,
      fstateOptions: [
        {value: 1,label:'使用'},
        {value: 0,label:'禁用'},
      ],
      total: 0,
      tableColor,
      buttonColor,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fpackno: undefined,
        fstate: undefined,
        fupddate: undefined,
        foperator: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      dataForm: {
        fpackname: undefined,
        fpackno: undefined,
        frfidbarcode: undefined,
        fstate: undefined,
        fupddate: undefined,
        foperator: undefined,
        id: undefined
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
    };
  },
  created() {
    this.getList();
    // 客户列表
    fsiteOptionsByLevel(3)
      .then(response => {
        this.fsiteNoBelongOptions = response.data.data.list
      })
      .catch(() => {
        this.fsiteNoBelongOptions = []
      })
    // 全部容器列表
    listtsPack({fsiteNo:this.$store.state.user.fsiteNo,limit: -1})
      .then((response) => {
        this.searchListAll = response.data.data.list;
      })
      .catch(() => {
        this.searchListAll = [];
      });
      getListArea({ flag: 13 })
        .then((response) => {
          this.getListfoperator = response.data.data.list;
        })
        .catch(() => {
          this.getListfoperator = [];
        });
  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // 操作员
    foperatorFormat: function (row, column) {
      if (this.getListfoperator) {
        for (let i = 0; i < this.getListfoperator.length; i++) {
          if (row.foperator == this.getListfoperator[i].value) {
            return this.getListfoperator[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 容器名称
    fnameFormat: function (row, column) {
      if (this.searchListAll.length > 0) {
        for (let i = 0; i < this.searchListAll.length; i++) {
          if (row.fpackno == this.searchListAll[i].fpackno) {
            return this.searchListAll[i].fpackname;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    //获取列表
    getList() {
      this.listLoading = true;
      listpackInv(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    //查找
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    //取消弹框
    cancel() {
      this.dialogFormVisible = false;
      this.dataForm = {
        fstockname: undefined,
        fstockno: undefined,
        fgoodno: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fbillno: undefined,
        fuseqty: undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
        id: undefined,
      };
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>